<template>
	<view class="container">



		<view class="carousel-section">
			<!-- 标题栏和状态栏占位符 -->
			<view class="titleNview-placing"></view>
			<!-- 背景色区域 -->
			<!-- <view class="titleNview-background" :style="{backgroundColor:titleNViewBackground}"></view> -->
			<swiper class="carousel" circular @change="swiperChange">
				<swiper-item v-for="(item, index) in carouselList" :key="index" class="carousel-item">
					<image :src="item.src" mode="aspectFill" />
				</swiper-item>
			</swiper>

			<view class="over-time">
				<view class="over-inner"></view>
				<view class="starttime">开始时间：{{promotionData.pStartDate}}</view>
				
			</view>
		</view>
		<view class="tab-box">
			<text class="item active">距本场结束剩余:{{times}}</text>

		</view>


		<scroll-view scroll-y="true">
			<view class="guess-section">
				<view v-for="(item, index) in goodsList" :key="index" class="guess-item">
					<view class="image-wrapper">
						<image :src="item.defaultAlbum" mode="aspectFill"></image>
					</view>
					<view class="info">
						<text class="title clamp">{{item.pName}}</text>
						<text class="desc clamp">{{item.cModelDescription}}</text>
						<text class="price">秒杀价 <text class="num">￥{{item.fSalePrice}}</text><text class="old">原价<text class="under">￥{{item.pfMarkPrice}}</text></text></text>
						<text class="stock">

							<text class="nums">剩余{{item.lInventoryCount}}件<text class="over-s" :style="{width:item.lInventoryCount/(item.lInventoryCount+item.iSales)*100+'%'}"></text></text>
							<text class="collect" @click="navToDetailPage(item)">马上抢购</text>
						</text>
					</view>




				</view>
			</view>

		</scroll-view>

		<!-- 分享 -->
		<share ref="share" :contentHeight="900" :shareList="shareList"></share>
	</view>
</template>

<script>
	import Guess from "../../components/like/guess2.vue"
	import share from '@/components/share';
	export default {
		components: {
			Guess,
			share
		},
		data() {
			return {
				titleNViewBackground: 'none',
				swiperCurrent: 0,
				swiperLength: 3,
				shareList: [],
				carouselList: [{
						src: "/static/img/1/105.png",
						background: "none",
					},
					{
						src: "/static/img/1/105.png",
						background: "none",
					},
					{
						src: "/static/img/1/105.png",
						background: "none",
					},
				],
				goodsList: [],
				banner: '',
				promotionId: '',
				promotionData: {},
				current:1,
				timer: null,
				times: "--天 --:--:--"


			};
		},

		async onLoad(options) {
			// this.loadData();
			var itemdata = this.$SysCache.get('itemData')
			this.shareList = await this.$api.json('shareList');
			this.banner = itemdata.image
			this.promotionId = itemdata.id
			this.promotionData = itemdata
			this.timeDown()
			this.loadData();
		},

		methods: {
			mias(item) {
				let id = item.pid;
				uni.navigateTo({
					url: `/promotion/seckill/index?id=${id}`
				})
			},
			//详情页
			navToDetailPage(item) {
				let id = item.pid;
				uni.navigateTo({
					url: `/pages/detail/index?id=${id}`
				})
			},
			loadData() {
				let orders = [{
					fieldname: "iOrder",
					direction: "asc"
				}]

				this.$Request.post(
					this.$api.httpApi.search.search + "&token=" + this.$SysCache.get('token'), {
						queryCondition: {
							order: orders,
							pageindex: this.current,
							pagesize: 12,
							where: [{
								fieldname: "promotionActivityId",
								valuefrom: "PP" + (this.promotionData.id)
							}]
						}
					}
				).then(res => {
					if (res.code == 200) {
						this.goodsList = res.data.data
					}
				})
			},
			timeDown() { // 倒计时
				clearInterval(this.timer);
				var starttime = new Date(this.promotionData.pStartDate.replace(/-/g, "/")) / 1000;
				var nowDate = Math.round(new Date() / 1000); // 当前时间
				//var endtime = Number(this.initActiveMsgObj.end_time); 
				var endtime = new Date(this.promotionData.pEndDate.replace(/-/g, "/")) / 1000;
				// endtime = Math.round(new Date('2019/7/10 14:56:00') / 1000); + 60;
				if (endtime < nowDate) {
					return
				}


				var totalSeconds = parseInt((endtime - nowDate)); // 相差的总秒数
				//天数
				var days = Math.floor(totalSeconds / (60 * 60 * 24));
				//取模（余数）
				var modulo = totalSeconds % (60 * 60 * 24);
				//小时数
				var hours = Math.floor(modulo / (60 * 60));
				hours = hours < 10 ? ('0' + hours) : hours;
				modulo = modulo % (60 * 60);
				//分钟
				var minutes = Math.floor(modulo / 60);
				minutes = minutes < 10 ? '0' + minutes : minutes;
				// console.log(minutes)
				//秒
				var seconds = modulo % 60;
				seconds = seconds < 10 ? '0' + seconds : seconds;
				// console.log(seconds);
				//输出到页面
				this.times = days + "天" + hours + ":" + minutes + ":" + seconds
				// this.seconds = seconds + ':' + minutes + ':' + seconds;
				// console.log(days + "天" + hours + "时" + minutes + "分");
				//if(totalSeconds <= 0){
				if (totalSeconds <= 60) {
					clearInterval(this.timer);
					// window.location.reload()
				} else {
					this.timer = setInterval(this.timeDown, 1000);
				}

			}
		},
		onNavigationBarButtonTap(e) {
			// console.log(e)

			this.$refs.share.toggleMask();


		}

	}
</script>

<style lang="scss">
	page {

		background: #f5f5f5;

	}



	.m-t {
		margin-top: 16upx;
	}


	.tab-box {
		z-index: 5;
		position: fixed;
		background: #fff;
		width: 100%;
		top: 473upx;
		height: 80upx;
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 0 90upx;
		font-size: 21upx;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: rgba(120, 120, 120, 1);



	}

	scroll-view {
		position: relative;
		top: 470upx;
		overflow: hidden;
		z-index: 1;

		.guess-section {
			display: flex;
			// flex-wrap:wrap;
			padding: 0;
			justify-content: flex-start;
			align-items: center;
			flex-wrap: wrap;


			.guess-item {
				display: flex;
				justify-content: flex-start;
				width: 100%;
				padding-bottom: 29upx;
				background: #fff;
				margin-bottom: 10upx;
				padding: 0 21upx;
				height: 240upx;
				align-items: center;



			}

			.image-wrapper {
				width: 216upx;
				height: 139upx;
				border-radius: 3px;
				overflow: hidden;
				background: #fff;

				image {
					width: 100%;
					height: 100%;
					opacity: 1;
				}
			}

			.info {
				flex: 1;
				padding-left: 30upx;

				.title {
					display: block;
					font-size: 23upx;
					font-family: Microsoft YaHei;
					font-weight: 400;
					color: rgba(68, 68, 68, 1);
					line-height: 35upx;
					width: 400upx;

				}

				.desc {
					display: block;
					font-size: 19upx;
					font-family: Microsoft YaHei;
					font-weight: 400;
					color: rgba(119, 119, 119, 1);
					line-height: 32upx;
				}

				.price {
					font-size: 19upx;
					font-family: Microsoft YaHei;
					font-weight: 400;
					color: rgba(119, 119, 119, 1);
					line-height: 32upx;

					.num {
						color: #F0406F;
						margin-right: 20upx;
					}

					.under {
						text-decoration: line-through;
					}





				}

				.stock {
					// display: flex;
					// justify-content: space-between;
					// align-items: center;
					display: block;
					line-height: 1;
					width: 100%;

					.nums {
						position: relative;
						z-index: 10;
						width: 133upx;
						height: 20upx;
						background: rgba(255, 255, 255, 1);
						border: 1upx solid rgba(83, 193, 158, 1);
						border-radius: 10upx;
						display: inline-flex;
						justify-content: center;
						align-items: center;
						font-size: 13upx;
						font-family: Microsoft YaHei;
						font-weight: 400;
						color: rgba(76, 192, 156, 1);

						.over-s {
							position: absolute;
							width: 0%;
							background: #45AA8A;
							opacity: 0.3;
							z-index: 5;
							top: 0;
							left: 0;
							height: 100%;

						}

					}

					.collect {
						float: right;
						width: 141upx;
						height: 44upx;
						background: rgba(240, 64, 111, 1);
						border-radius: 22upx;
						display: inline-flex;
						justify-content: center;
						align-items: center;
						font-size: 23upx;
						font-family: Microsoft YaHei;
						font-weight: 400;
						color: rgba(255, 255, 255, 1);
					}
				}
			}




		}
	}

	/* 头部 轮播图 */
	.carousel-section {
		position: fixed;
		top: 44px;
		width: 100%;
		z-index: 10;

		.titleNview-placing {
			height: var(--status-bar-height);
			padding-top: 0upx;
			box-sizing: content-box;
		}


		.titleNview-background {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 856upx;
			transition: .4s;
		}

		.over-time {
			position: absolute;
			bottom: 0;
			left: 0;
			right: 0;
			width: 100%;
			height: 77upx;
			display: flex;
			justify-content: center;
			color: #fff;
			align-items: center;
			font-size: 30upx;
			.over-inner {
				position: absolute;
				bottom: 0;
				left: 0;
				right: 0;
				top: 0;
				background: rgba(0, 0, 0, 0.5);
				z-index: 1;
			}
			.starttime{
				position: absolute;
				width: 100%;
				height: 100%;
				z-index: 10;
				text-align: center;
				line-height:77upx;
			}

			.item {
				z-index: 10;
				width: 25%;
				height: 100%;
				// padding: 20upx 0;
				position: relative;
				display: flex;
				justify-content: center;
				align-items: center;
				flex-wrap: wrap;

				image {
					position: absolute;
					width: 100%;
					height: 82upx;
					top: 3upx;
					z-index: 5;
				}

				text {
					position: relative;
					z-index: 10;
					display: block;
					width: 100%;
					font-size: 21upx;
					font-family: Microsoft YaHei;
					font-weight: 400;
					color: rgba(255, 255, 255, 1);
					line-height: 27upx;
					text-align: center;

				}
			}

		}
	}

	.carousel {
		width: 100%;
		height: 385upx;

		.carousel-item {
			width: 100%;
			height: 100%;
			overflow: hidden;
		}

		image {
			width: 100%;
			height: 100%;
		}
	}

	.swiper-dots {
		display: flex;
		position: absolute;
		left: 60upx;
		bottom: 15upx;
		width: 72upx;
		height: 36upx;
		background-image: url();
		background-size: 100% 100%;

		.num {
			width: 36upx;
			height: 36upx;
			border-radius: 50px;
			font-size: 24upx;
			color: #fff;
			text-align: center;
			line-height: 36upx;
		}

		.sign {
			position: absolute;
			top: 0;
			left: 50%;
			line-height: 36upx;
			font-size: 12upx;
			color: #fff;
			transform: translateX(-50%);
		}
	}
</style>
